<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>AJAX的封装</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    
    <script type="text/javascript">
        /* GET / POST

            url
            data
            type
            contentType
            header
            dataType
            success
            fail
        */

        ajax({
            url: "http://bufantec.com/api/douban/movie/in_theaters",
            data: {
                start: 6
            },
            success(res){
                console.log(res);
            }
        })

        ajax({
            url: "http://bufantec.com/api/test/user/doLogin",
            type: "POST",
            data: {
                username: "libai",
                password: "123456"
            },
            success(res){
                console.log(res);
            }
        })

        ajax({
            url: "http://192.160.0.100:9000/json",
            type: "POST",
            contentType: "application/json",
            data: {
                username: "libai",
                password: "123456"
            },
            success(res){
                console.log("65", res);
            }
        })

        function ajax(params){
            if(!params.url){
                alert("请务必传入请求地址");
                return;
            }
            // 赋值默认参
            params = Object.assign({
                type: "GET",
                data: null,
                contentType: "application/x-www-form-urlencoded", // post请求时定义参数类型
                header: {}, // 与后台协定的头部信息
                dataType: "json", // 返回值类型
                success(){},
                fail(){},
            }, params);

            // 声明核心对象
            var xhr = new XMLHttpRequest();

            // 赋值返回值类型
            xhr.responseType = params.dataType;

            // 请求过程结束监听
            xhr.onload = function (){
                switch(xhr.status){
                    case 200:
                        params.success(xhr.response);
                        break;
                    case 400:
                        params.fail(xhr.statusText, "参数错误");
                        break;
                    case 404: 
                        params.fail(xhr.statusText, "URL信息错误");
                        break;
                    case 500:
                        params.fail(xhr.statusText, "服务器内部错误");
                        break;
                    default:
                        break;
                }
            }

            // 请求意外情况
            xhr.onerror = params.fail;

            // 请求过程的函数  onprogress

            // 参数序列化  qs.js
            var str = "";
            for(var i in params.data){
                // i => key params.data[i]  value   key:value => key=value&
                str += `&${i}=${params.data[i]}`;
            }
            // & name=value&name=value...
            str = str.slice(1);

            // 发送请求前做
            params.beforeSend && params.beforeSend();

            // 定义请求类型以及地址
            if(params.type.toUpperCase() == "GET"){
                xhr.open("GET", params.url + (params.data ? "?" + str : ""));
                // 发送请求
                xhr.send(null);
            }else {
                xhr.open("POST", params.url);
                xhr.setRequestHeader("Content-Type", params.contentType);
                for(var j in params.header){
                    xhr.setRequestHeader(j, params.header[j]);
                }

                // 发送请求
                if(/json/.test(params.contentType)){
                    xhr.send(JSON.stringify(params.data));
                }else if(/form/.test(params.contentType)){
                    xhr.send(str);
                }
            }

        }
    </script>
</body>
</html>